<template>
  <div class="recent-clothes-section">
    <div class="section-header">
      <h3>最近穿着</h3>
      <van-button  size="small"  @click="viewAllClothes" class="view-all-btn">
        查看全部 <van-icon name="arrow" size="12" />
      </van-button>
    </div>
    
    <!-- 最近穿着的衣物列表 -->
    <div class="recent-clothes-list" v-if="recentClothes.length > 0">
      <ClothesCard 
        v-for="clothes in recentClothes" 
        :key="clothes.id"
        :clothes="clothes"
        @click="viewClothesDetail(clothes._id)"
        class="clothes-card-item"
      />
    </div>
    
    <!-- 加载状态 -->
    <div class="loading-state" v-if="loading">
      <LoadingState message="加载中..." />
    </div>
    
    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && recentClothes.length === 0">
      <EmptyState 
        icon="clothes"
        title="暂无穿着记录"
        description="记录你的每一次穿着，打造专属衣橱"
        button-text="添加衣物"
        @button-click="addNewClothes"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useClothesStore } from '../store/clothes';
import { useRouter } from 'vue-router';
import { Button, Icon } from 'vant';
import ClothesCard from './ClothesCard.vue';
import EmptyState from './EmptyState.vue';
import LoadingState from './LoadingState.vue';

const clothesStore = useClothesStore();
const router = useRouter();

// 状态
const loading = ref(false);
const recentClothes = ref([]);
const maxDisplayCount = 4; // 最多显示的衣物数量

// 组件挂载时获取最近穿着的衣物
const getRecentClothes = async () => {
  try {
    loading.value = true;
    
    // 首先从API获取最新的衣物数据
    await clothesStore.fetchClothesList();
    
    // 从store获取衣物列表并按最后穿着时间排序
    const sortedClothes = [...clothesStore.clothesList]
      .filter(item => item.lastWorn) // 使用store中正确的属性名lastWorn
      .sort((a, b) => new Date(b.lastWorn) - new Date(a.lastWorn)) // 按最后穿着时间降序排序
      .slice(0, maxDisplayCount); // 只取前几条
    
    // 设置真实数据
    recentClothes.value = sortedClothes;
  } catch (error) {
    console.error('获取最近穿着衣物失败:', error);
    // 出错时清空列表，让空状态显示
    recentClothes.value = [];
  } finally {
    loading.value = false;
  }
};

// 查看衣物详情
const viewClothesDetail = (clothesId) => {
  router.push(`/clothes/${clothesId}`);
};

// 查看全部衣物
const viewAllClothes = () => {
  router.push('/clothes');
};

// 添加新衣物
const addNewClothes = () => {
  router.push('/add-clothes');
};

// 组件挂载时调用
onMounted(() => {
  getRecentClothes();
});
</script>

<style scoped>
.recent-clothes-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.view-all-btn {
  font-size: 14px;
  color: #409eff;
  padding: 0 5px;
}

.view-all-btn .van-icon {
  margin-left: 4px;
}

/* 最近穿着列表 */
.recent-clothes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.clothes-card-item {
  width: 100%;
}

/* 加载和空状态 */
.loading-state,
.empty-state {
  padding: 40px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .recent-clothes-section {
    padding: 16px;
  }
  
  .recent-clothes-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .section-header h3 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .recent-clothes-list {
    grid-template-columns: 1fr;
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .recent-clothes-section {
    background-color: #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .section-header h3 {
    color: #f0f0f0;
  }
  
  .view-all-btn {
    color: #66b1ff;
  }
}
</style>